<template>
  <s-layout :title="pageTitle" :bg-style="{ color: '#fff' }">
    <view class="code-box">
      <view
        v-for="(item, index) in state.dataList"
        :key="index"
        class="code-item ss-flex ss-col-center ss-row-between"
        @tap="onDetail(item)"
      >
        <view class="ss-flex-2 ss-flex ss-col-center">
          <image
            class="avatar-img"
            :src="sheep.$url.cdn(item.avatar)"
            mode="aspectFill"
          />
          <view class="ss-line-1 ss-flex-1">{{ item.nickname || "-" }}</view>
        </view>
        <view class="ss-flex-1 ss-flex ss-col-center ss-row-between">
          <view>{{ item.childCount || "-" }}</view>
          <view class="gray">{{ item.createtime || "-" }}</view>
        </view>
      </view>
      <uni-load-more
        v-if="state.total > 0"
        :status="state.loadStatus"
        :content-text="{
          contentdown: '上拉加载更多',
        }"
        @tap="loadmore"
      />
    </view>
  </s-layout>
</template>

<script setup>
import sheep from "@/sheep";
import dayjs from "dayjs";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive, computed } from "vue";

const state = reactive({
  queryParams: {
    page: 1, // 页码
    list_rows: 10, // 条数
    type: "tourist", // 类型 tourist游客 vip会员
    level: 1, // 级别 1一级分销商 2二级分销商
  },
  loadStatus: "", // 加载状态
  total: 0, // 总条数
  dataList: [], // 数据列表
});

// 页面标题
const pageTitle = computed(() => {
  const { type, level } = state.queryParams;
  let title = "";
  title += level == 1 ? "一级" : "二级";
  title += type == "tourist" ? "成员" : "分销商";
  return title;
});

// 获取分销商列表
function getList() {
  state.loadStatus = "loading";
  sheep.$api.commission
    .teamList(state.queryParams)
    .then((res) => {
      if (res.code == 1) {
        let list = res.data.data;
        list.forEach((item) => {
          item.createtime = dayjs(item.createtime).format("YYYY-MM-DD");
        });
        state.dataList = state.queryParams.page == 1 ? list : state.dataList.concat(list);
        state.total = res.data.total;
      }
    })
    .finally(() => {
      if (state.total > state.dataList.length) {
        state.loadStatus = "more";
      } else {
        state.loadStatus = "noMore";
      }
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 800);
    });
}

// 查看二级分销商
function onDetail(item) {
  sheep.$router.go("/pages/commission/team-visitor", {
    type: state.queryParams.type,
    pid: item.id,
  });
}

// 加载更多
function loadmore() {
  if (state.loadStatus !== "noMore") {
    state.queryParams.page++;
    getList();
  }
}

// 上拉加载更多
onReachBottom(() => {
  loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
  state.queryParams.page = 1;
  getList();
});

onLoad((e) => {
  state.queryParams.type = e.type;
  state.queryParams.level = e.level;
  getList();
});
</script>

<style lang="scss" scoped>
.code-box {
  padding: 30rpx;
  .code-item {
    padding: 16rpx 20rpx;
    border-radius: 12rpx;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(217, 217, 217, 0.4);
    color: #252525;
    font-size: 28rpx;
    line-height: 44rpx;
    margin-bottom: 20rpx;
    .avatar-img {
      width: 84rpx;
      height: 84rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .gray {
      font-size: 24rpx;
      color: #979797;
    }
  }
}
</style>
